<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <META HTTP-EQUIV="pragma" content="no-cache">
    <META HTTP-EQUIV="Cache-Control" content="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" content="0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>创建好友</title>


    <link href="https://libs.cdnjs.net/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
    <link href="//at.alicdn.com/t/font_1494741_ocv8339blrb.css" rel="stylesheet">
    <link href="__PUBLIC__/chat/css/main.css" rel="stylesheet">
    <link href="__PUBLIC__/vendor/icheck/css/custom.css" rel="stylesheet">
    <link href="__PUBLIC__/vendor/icheck/skins/all.css" rel="stylesheet">
    <link href="__PUBLIC__/chat/css/friend.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://libs.cdnjs.net/twitter-bootstrap/4.3.1/js/bootstrap.js"></script>
    <script src="https://libs.cdnjs.net/twitter-bootstrap/3.2.0/js/alert.js"></script>
    <script type="text/javascript" src="__PUBLIC__/vendor/layer/layer.js"></script>
    <script type="text/javascript" src="__PUBLIC__/vendor/icheck/js/icheck.js"></script>
    <script type="text/javascript" src="__PUBLIC__/chat/js/main.js"></script>



    <body onload="connect()">

        <div class="container">
            <div class="friend">
                <form action="" id="formdata" class="">
                    <div class="form-group">
                        <input type="text" name="group_name" class="form-control" id="" placeholder="请输入群聊名称">
                    </div>

                    {volist name="list" id="vo"}
                    <!--  -->
                    {notempty name="vo"}
                    <div class="title  mt-3">{$key}</div>
                    <ul class="list-group">
                        {volist name="vo" id="v"}
                        <li class="list-group-item">
                            <span class="head">{$v.ide}</span>
                            <span class="badge">
                                    <input tabindex="1" type="checkbox" name="ids[]" value="{$v.id}" id="input-{$v.id}">
                            </span>
                            <div>{$v.nickname}</div>
                            <div>{$v.account}</div>
                        </li>
                        {/volist}
                    </ul>
                    {/notempty}
                    <!--  -->
                    {/volist}
                    <input type="button" class="btn btn-info mt-3" id="submit" style="float:right;" value="发起群聊">
                </form>

            </div>
        </div>
        <script>
            // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
            WEB_SOCKET_SWF_LOCATION = "__PUBLIC__/chat/swf/WebSocketMain.swf";
            // 开启flash的websocket debug
            WEB_SOCKET_DEBUG = true;

            var ws, name, client_list = {};

            // 连接服务端
            function connect() {
                console.log('1');
                // 创建websocket
                ws = new WebSocket("ws://" + document.domain + ":7272");
            }
        </script>
        <script>
            var index = parent.layer.getFrameIndex(window.name);
            $(document).ready(function() {
                var callbacks_list = $('.demo-callbacks ul');
                $('input').iCheck({
                    checkboxClass: 'icheckbox_square-blue',
                    radioClass: 'iradio_square-blue',
                    increaseArea: '20%'
                });
            });

            $('#submit').click(function() {
                var param = $('#formdata').serializeArray();
                $.post("{:url('addgroup')}", param, function(res) {
                    console.log(res);
                    layer.msg(res.msg)
                    if (res.code == 1) {
                        parent.layer.close(index);
                        var user_id = "{:getSessInfo('id')}";
                        var data = {
                            type: "add_group",
                            user_id,
                            group_name: res.data.group_name,
                            room_id: res.data.id,
                            allids: res.data.allids,
                            content: '',
                            time: "",
                            ide: res.data.ide,
                        };
                        console.log(JSON.stringify(data));
                        ws.send(JSON.stringify(data));
                    }
                })
            })
        </script>
    </body>

</html>